<template>
<div>
  <div class="row">
    <Banner/>
    <!-- About组件用来演示组件内路由守卫是否被调用 -->
    <About/>
  </div>
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
      <div class="list-group">
        <!--原始使用a标签跳转多个页面,多页面应用-->
         <!-- <a class="list-group-item active" href="./about.html">About</a>
         <a class="list-group-item" href="./home.html">Home</a> -->

          <!-- Vue中借助router-link标签实现路由的切换 -->
          <!-- router-link，最终会被vue-router转成a标签 -->
          <!-- active-class="active"，该元素被激活时的样式，赋予高亮的效果 -->
         <!-- <router-link class="list-group-item" active-class="active" to="/about11">About</router-link> -->
         <!-- 按照路由名字跳转 -->
         <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
         <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel">
        <div class="panel-body">
          <keep-alive>
            <!-- 指定组件呈现的位置 -->
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Banner from './components/Banner'
import About from './pages/About'
export default {
    name:'App',
    components:{Banner,About},
}
</script>
